<template>
  <view class="balance">
    <up-navbar
        :autoBack="true"
        :placeholder="false"
        bgColor="transparent"
        :title="['消费券','补贴券','资产积分','商家积分'][ data.wallet_type]"
    >

    </up-navbar>
    <view class="content">
      <up-status-bar ></up-status-bar>
      <!-- 头部 -->
      <view class="header bg_set" :class="[`header${data.wallet_type}`]">
        <view class="minle">
          <view class="right">
            <text class="money">
              {{ $toFiexd(showNum, 2) }}
            </text>
            <!-- <view class="txt" v-if="data.wallet_type == 3" @click="$goURl('/pages/personal/wallet/fclist')">DD 列表</view> -->

          </view>
          <text class="text"> {{ ['消费券', '补贴券', '资产积分', '商家积分'][data.wallet_type] }}</text>
        </view>
      </view>
      <!-- 明细 -->
      <view class="detail">
        <view class="detailHder">
          <view>
            <image src="http://pubuimg.cqguanjie.cn/chat/16948580779132"></image>
            <text> {{ ['消费券记录', '补贴券记录', '资产积分记录', '商家积分'][data.wallet_type] }}</text>
          </view>
          <view class="btnpd" v-if="data.wallet_type == 1">
            <!-- <switch name="switch" color="#0bc4e3" @change="handdeti" :checked="data.linestate" style="transform:scale(0.7)"/>
            是否排队 -->

          </view>
          <!-- <view class="" style="display: flex;">
              <view v-if="data.wallet_type == 3"  class="btn" style="margin-right: 10px;"  @click="$goURl(`/pages/personal/wallet/withdrawal`)">转账到星链卡</view>
              <view v-if="data.wallet_type == 2 "  class="btn" style="margin-right: 10px;"  @click="$goURl(`/pages/personal/wallet/recharge?code=${data.wallet_type}`)">转账到交易所</view>
          </view> -->
        </view>
        <!-- 空数据 -->
        <view class="empty" v-if="data.detailsList.length==0">
          <empty></empty>
        </view>
        <!-- 有钱包明细 -->
        <view class="moneys" v-else>
          <scroll-view style="height: 100%;" scroll-y @scrolltolower='scrolltolower'>
            <view class="moneysFor" v-for="(item,index) in data.detailsList" :key="index">
              <view class="information">
                <text class="text">{{ data.walletList[item.detailed] }}</text>
                <view class="source">
                  <!-- v-if="item.source.username" -->
                  <!-- {{item.source.username}} -->
                  <text
                      v-if="item.source.nickname||item.source.mobile">
                    来源：{{ item.source.nickname || item.source.mobile }}
                  </text>
                </view>
                <view class="date">{{item.notes}}</view>

                <text class="date">{{ $clearTime(item.CreatedAt) }}</text>

              </view>
              <view class="moneyl">
                <text>{{ $toFiexd(item.money, 6) }}</text>
                <!-- <view>剩余:{{$toFiexd(item.change_money+item.money,2)}}</view> -->
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- 底部提现，充值 -->
      <!-- 			<view class="way">
        <text class="withdrawal" @click="$goURl('/pages/personal/wallet/withdrawal')">提现</text>
        <text class="recharge" @click="$goURl('/pages/personal/wallet/recharge')">转账</text>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import {getCurrentInstance, reactive} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";

const {
  appContext,proxy
} = getCurrentInstance();
const data = reactive({
  page: 0,
  pages: 1,
  size: 20,
  wallet_type: '', //钱包类型
  detailsList: [], //明细
  userInfo: {}, //用户信息
  walletList: {}, //钱包名称列表
  linestate: 0,
})
const showNum=ref(0)
onLoad((option) => {
  console.log('页面onLoad')
  data.wallet_type = option.wallet_type
  showNum.value=option.showNum

  // uni.setNavigationBarTitle({
  // 	title: ['消费券记录','补贴券记录','资产积分记录','商家积分'][ data.wallet_type]
  // });

})
onShow(() => {
  data.userInfo = uni.getStorageSync('userInfo')
  console.log('页面onShow')
  data.page = 0
  data.pages = 1
  data.detailsList = []
  records()
  data.walletList = uni.getStorageSync('wallet')
  // getLine() //获取状态
})

function getLine() {
  appContext.config.globalProperties.$SHOPrequest({
    url: `api/line/`,
    method: 'GET',
    success(res) {
      console.log(res, "rrrr")
      data.linestate = res.data.state == 1 ? true : false
    }
  })
}

//是否排队
function handdeti(e) {
  console.log(e, "e")
  let state = 1
  if (e.detail.value) {
    state = 1
  } else {
    state = 0
  }
  appContext.config.globalProperties.$SHOPrequest({
    url: `business/line/`,
    method: 'POST',
    data: {state: state},
    success(res) {

    }
  })
}


function records() {
  data.page++
  appContext.config.globalProperties.$SHOPrequest({
    url: `business/record/?page=${data.page}&size=${data.size}&wallet_type=${data.wallet_type}`,
    method: 'GET',
    success(res) {

      let datas = res.data.data
      datas.forEach((ct) => {
        data.detailsList.push(ct)
      })
      if (data.pages) {
        if (data.page == data.pages) {
          data.loadmore = "nomore"
        } else {
          data.loadmore = "loading"
        }
      } else {
        data.loadmore = "nomore"
      }
    }
  })
}

//滑动到底部/做上拉加载
const scrolltolower = () => {
  console.log('111111')
  if (data.detailsList.length >= 20) {
    records()
  }
}
// onReachBottom(()=>{
// 	console.log('onReachBottom')
// })
</script>

<style scoped lang="scss">
page {
  background-color: #F3F6FD;
}

.content {
  width: 100%;

  .header {
    width: 100%;
    height: 460rpx;
    // background: url('http://pubuimg.cqguanjie.cn/chat/16948574023287');
    // background-repeat: round;
    //background-color: #F63B29;
    display: flex;
    flex-direction: column;
    padding-top: 20rpx;
    box-sizing: border-box;

    &.header0 {
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755769840069.png");
    }
    &.header1 {
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755857256168.png");
    }

    &.header2 {
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755769685585.png");
    }
    &.header3 {
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755769648300.png");

    }

    .minle {
      margin: 40px;
      display: flex;
      flex-direction: column;

      .right {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .money {
          margin-bottom: 10px;
          font-size: 32px;
          //color: #fff;
          font-weight: 700;
        }

        .txt {
          //color: #fff;
          font-size: 18px;
        }
      }


      .text {
        //color: #f6f6f6;
        font-size: 14px;
      }
    }

  }

  .detail {
    width: 94%;
    background-color: #fff;
    margin: -40px auto 0 auto;
    padding: 20px 0;
    border-radius: 10px;

    .detailHder {
      padding-bottom: 20rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .btnpd {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        margin-right: 30rpx;
      }

      image {
        width: 4px;
        height: 12px;
        margin: 0 4px 0 15px;
      }

      text {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
      }
    }

    .empty {
    }

    .moneys {
      width: 100%;
      height: 545px;

      .moneysFor {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgb(245, 245, 245);
        padding: 15px;

        .information {
          display: flex;
          flex-direction: column;

          .text {
            color: #333;
            font-weight: 700;
            font-size: 13px;
          }

          .source {
            text {
              color: rgb(153, 153, 153);
              font-size: 14px;
            }
          }

          .date {
            color: rgb(153, 153, 153);
            font-size: 14px;
          }
        }

        .moneyl {
          min-width: 200rpx;
          text-align: right;
          text {
            color: #f4391c;
            font-size: 16px;
            font-weight: 700;
          }

          view {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }

  .way {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: center;
    display: flex;
    border-top: 1px solid #ccc;

    .withdrawal {
      width: 50%;
      background-color: #fff;
      display: block;
      padding: 30upx 0;
      font-size: 36rpx;
      color: #333333;
      font-weight: 700;
    }

    .recharge {
      width: 50%;
      display: block;
      padding: 30upx 0;
      color: #ffffff;
      font-weight: 700;
      font-size: 36rpx;
      background: linear-gradient(90deg, #ff1b4c, #e80001);
    }
  }
}

.btn {
  background-color: $color4;
  color: #fff;
  padding: 10upx 30upx;
  border-radius: 40upx;
  font-size: 24upx;
}

.transfer {
  padding: 10rpx 20rpx;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 20rpx;
}
</style>
